<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <title>添加车位信息</title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <form class="layui-form layui-form-pane" style="">
            <div class="layui-form-item">
                <label class="layui-form-label">车位编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="parkPlaceNum" required id="parkPlaceNum" lay-verify="required" placeholder="请输入车位编号" autocomplete="off" class="layui-input">
                    <span id="numCheck"></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">车位类型</label>
                <div class="layui-input-inline">
                    <select name="desc" id="desc" lay-verify="required">
                        <option value="">请选择</option>
                        <option value="私人车位">私人车位</option>
                        <option value="普通车位">普通车位</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script src="/static/assets/layui.all.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script src="/static/assets/limit.js"></script>
<script>

    $(function () {
        layui.use('form', function(){
                var form = layui.form
                    ,layer = layui.layer;

                $("#parkPlaceNum").on("change", function () {
                    var parkPlaceNum = $(this).val()
                    var numCheck = $("#numCheck")
                    if (parkPlaceNum.length < 5) {
                        numCheck.text("长度不能低于五位")
                        numCheck.css("color", "red")
                    } else {
                        $.ajax({
                            url: "/parkPlace/selectByNum",
                            type: "post",
                            dataType: "json",
                            data: {
                                parkPlaceNum: parkPlaceNum
                            },
                            success: function (data) {
                                console.log(data)
                                if (data.code === 0) {
                                    numCheck.text("可用")
                                    numCheck.css("color", "green")
                                } else {
                                    numCheck.text("已存在")
                                    numCheck.css("color", "red")
                                }
                            }
                        })

                    }
                })

                form.on('submit(add)', function(data){
                    console.log(data)
                    var text = $("#numCheck").text()
                    layer.confirm('您确定要增加停车位吗？', {
                        btn: ['确定','取消'] //按钮
                    }, function(){
                        if (text === "可用"){
                            $.ajax({
                                url: "/parkPlace/add",
                                type: "post",
                                dataType: "json",
                                data: data.field,
                                success: function (data) {
                                    console.log(data)
                                    layer.msg("添加成功")
                                    toParent()
                                }
                            })
                        }else {
                            layer.msg("车位编号已存在")
                        }
                    }, function(){
                        layer.msg('已取消', {
                            time: 2000, //20s后自动关闭
                        });
                    });


                    return false;
                })

            })

        $("#add").on("click", function () {
                var text = $("#numCheck").text()
                var desc = $("#desc")
                var parkPlaceNum = $("#parkPlaceNum")
                if (text === "可用" && desc.val() !== "") {
                    $.ajax({
                        url: "/parkPlace/add",
                        type: "post",
                        dataType: "json",
                        data: {
                            desc:desc.val(),
                            parkPlaceNum:parkPlaceNum.val()
                        },
                        success: function (data) {
                            console.log(data)
                            layer.msg("添加成功")
                            toParent()

                        }
                    })
                }else {
                    if(text === "已存在"){
                        layer.msg("车位编号已存在")
                    }else {
                        layer.msg("请输入全部信息")
                    }

                }
            })


    })
</script>